<template>
   <div>
      <!-- 内容 开始 -->
   <div class="w1080">
      <div class="l-place">
         location:
         <a href="javascript:;">home</a>
         >
         <a href="javascript:;">smartwatch</a>
         >
         <a href="javascript:;">G9</a>
      </div>
      <div class="l-particular">
         <div class="l-left">
            <div class="l-main-img">
               <div class="l-xtp" ref="target">
                  <img :src="urls=== null? url2 : 'http://www.kymid.com/testphp/public'+urls" alt="">
               </div>
               <div class="l-main-search">
                  <img src="@/assets/img/magnifying.png" alt="">
               </div>
               <div class="l-mack" :style='[position]' v-show='isShow'></div>
               <div class="l-f-mack" :style="[{backgroundImage: `url(${urls=== null? url2 : 'http://www.kymid.com/testphp/public'+urls})`}, bgPosition]" v-show='isShow'>
                  <!-- <img :src="images" alt="" class="l-img"> -->
               </div>
            </div>
            <div class="l-list">
               <div class="l-zjt">
                  <img src="@/assets/img/spec-left.png" alt="">
               </div>
               <ul>
                  <li class="l-active"><img :src="urls=== null? url2 : 'http://www.kymid.com/testphp/public'+urls"></li>
               </ul>
               <div class="l-yjt">
                  <img src="@/assets/img/spec-right.png" alt="">
               </div>
            </div>
            <div class="l-share">
                share:
               <img src="@/assets/img/Facebook.png" alt="">
               <img src="@/assets/img/Path.png" alt="">
               <img src="@/assets/img/Twitter.png" alt="">
               <img src="@/assets/img/mailbox.png" alt="">
            </div>
         </div>
         <div class="l-center" v-for="item in arrList" :key="item.id">
            <h3>{{item.name_en}}</h3>
            <h5>{{item.name_ch}}</h5>
            <p class="l-wenzi">
               {{item.synopsis}}
            </p>
            <div class="l-watch-size">
               <div class="l-option">Case size :</div>
               <div class="l-mm">
                  42mm
                  <img src="@/assets/img/act.png" alt="">
               </div>
            </div>
            <div class="l-watch-capacity">
               <div class="l-option">battery capacity :</div>
               <div class="l-mm">
                  380mAh
                  <img src="@/assets/img/act.png" alt="">
               </div>
            </div>
            <div class="l-color">
               <div class="l-option">color :</div>
               <ul>
                  <li class="l-act">
                     <img :src="urls=== null? url2 : 'http://www.kymid.com/testphp/public'+urls" alt="">
                     <img src="@/assets/img/act.png" alt="" class="l-pitch">
                  </li>
               </ul>
            </div>
            <div class="l-support">
               <!-- 支持手机版本：IOS8.0 and Android 4.4 above -->
            </div>
            <div class="l-button">
               <div>contact us</div>
               <div>contact us</div>
            </div>
         </div>
         <div class="l-right">
            <p>-----Hot Sale-----</p>
            <ul>
               <li v-for="item in arrLike" :key="item.id" @click="fn(item)">
                  <img :src="'http://www.kymid.com/testphp/public'+item.image">
                  <p>{{item.model}}</p>
               </li>
            </ul>
            <div class="l-page">
               <div ref="ldel" @click="subtract">
                  <img src="@/assets/img/todown.png" alt="">
               </div>
               <div ref="ladd" @click="add">
                  <img src="@/assets/img/toup.png" alt="">
               </div>
            </div>
         </div>
      </div>
      <div class="l-recommend">
         <div class="l-recommend-t">
            <span></span>
            Hot
         </div>
         <div class="l-reclist">
            <ul>
               <li>
                  <img src="@/assets/img/k30-3.jpg" alt="">
                  <p>Smart Watch K30</p>
                  <p><span>HOT</span></p>
               </li>
               <li>
                  <img src="@/assets/img/k30-3.jpg" alt="">
                  <p>Smart Watch K30</p>
                  <p><span>HOT</span></p>
               </li>
               <li>
                  <img src="@/assets/img/k30-3.jpg" alt="">
                  <p>Smart Watch K30</p>
                  <p><span>HOT</span></p>
               </li>
               <li>
                  <img src="@/assets/img/k30-3.jpg" alt="">
                  <p>Smart Watch K30</p>
                  <p><span>HOT</span></p>
               </li>
               <li>
                  <img src="@/assets/img/k30-3.jpg" alt="">
                  <p>Smart Watch K30</p>
                  <p><span>HOT</span></p>
               </li>
            </ul>
            <div @click="proxy.$router.push('/watch')">
               <a href="">view more</a>
            </div>
         </div>
      </div>
      <div class="l-product">
         <div class="l-product-lt">
            <div class="l-lt-title">
               <p>
                  <img src="@/assets/img/close.png" alt="" class="l-img">
                   product classification
               </p>
            </div>
            <div class="l-classify">
               <p>
                  <img src="@/assets/img/close.png" alt="" class="l-img">
                   All products
               </p>
               <div class="l-watches">
                  <div v-for="val in arrType" :key="val.id">
                     <p @click="list(val.id)">
                        <img src="@/assets/img/close.png" alt="" class="l-img" v-if="flag2!==val.id">
                        <img src="@/assets/img/open.png" alt="" class="l-img" v-if="flag2===val.id">
                        {{val.name}}
                     </p>
                     <div class="l-watche" v-if="flag2===val.id">
                        <dl>
                           <dd v-for="item in lists2" :key="item.id">
                              <a href="javascript:;" @click="showData(item)">
                                 <img :src="'http://www.kymid.com/testphp/public'+item.image" alt="">
                              </a>
                              <p>{{item.name_en}}</p>
                           </dd>
                           <dd><a href="#/watch">view more>></a></dd>
                        </dl>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="l-product-rt">
            <div class="l-particulars">
               <div class="l-title">
                  <span></span>
                  product
               </div>
               <div class="l-particulars-parameter">
                  <p>Product Parameter:</p>
                  <div>
                     <div>
                        <p>model: {{xh}}</p>
                        <p>Strap material: </p>
                        <p>viewing screen: </p>
                        <p>waterproof rating: </p>
                        <p>battery capacity: </p>
                     </div>
                     <div>
                        <p>CPU: </p>
                        <p>Band width: </p>
                        <p>screen size: </p>
                        <p>charge mode: </p>
                        <p>hours of use: </p>
                     </div>
                     <div>
                        <p>weight: </p>
                        <p>In the box material: </p>
                        <p>screen resolution: </p>
                        <p>Call way: </p>
                        <p>stand-by time: </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- 内容 结束 -->
   </div>
</template>
<script setup>
import { useStore } from 'vuex'
import { getCurrentInstance, ref, reactive, watch, onMounted } from 'vue'
import { useMouseInElement } from '@vueuse/core'
const store = useStore()
const { proxy } = getCurrentInstance()
const arrLike = ref(null)
const page = ref(1)
const ldel = ref(null)
const ladd = ref(null)
const urls = ref(null)
const arrList = ref([])
const xh = ref('G9')
const url2 = ref('http://www.kymid.com/testphp/public/uploads/20210705/5a12acd2dc931ec3aa1f7d0c9c64c283.jpg')
onMounted(() => {
   console.log(store.state.msg)
   urls.value = store.state.msg.image
   xh.value = store.state.msg.model
   arrList.value[0] = store.state.msg
})
function showData (item) {
   urls.value = item.image
   xh.value = item.model
}
function fn (item) {
   console.log(item.model)
   urls.value = item.image
   arrList.value[0] = item
   xh.value = item.model
}
// const images = ref('@/assets/img/G9-2.jpg')
data()
// 放大镜
   // const currIndex = ref(0)
   const target = ref(null)
   const isShow = ref(false)
   // 遮罩层的坐标
   const position = reactive({
     left: 0,
     top: 0
   })
   const bgPosition = reactive({
      backgroundPositionX: 0,
      backgroundPositionY: 0
   })
   const { elementX, elementY, isOutside } = useMouseInElement(target)
   watch([elementX, elementY, isOutside], () => {
      // 每次有值发生变化，就读取新的数据即可
      isShow.value = !isOutside.value
      // 鼠标在图片的区域之外，不需要计算坐标
      if (isOutside.value) return
      // 水平方向
      if (elementX.value < 100) {
        // 左边界
        position.left = 0
      } else if (elementX.value > 220) {
         // console.log(elementX.value)
        // 右边界
        position.left = 120
      } else {
        // 中间的状态
        position.left = elementX.value - 100
      }
      // 垂直方向
      if (elementY.value < 100) {
        // 上边界
        position.top = 0
      } else if (elementY.value > 220) {
        // 下边界
        position.top = 120
      } else {
        // 中间的状态
        position.top = elementY.value - 100
      }
      // console.log(elementX.value, elementY.value, isOutside.value)
      // 计算预览大图背景的位置
      bgPosition.backgroundPositionX = -position.left * 2 + 'px'
      bgPosition.backgroundPositionY = -position.top * 2 + 'px'
      // 计算左侧遮罩层位置
      position.left += 'px'
      position.top += 'px'
    })
const flag = ref(true)
const arrType = ref([])
proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/type_list?lang=en').then(val => {
   // arrType.value.push(val.data.msg[1].children1)
   // val.data.msg[1].children1
   for (var k in val.data.msg[1].children1) {
      arrType.value.push(val.data.msg[1].children1[k])
   }
   console.log(arrType.value)
})
const lists = ref([])
const lists2 = ref([])
const flag2 = ref(null)
const flag3 = ref(true)
function list (id) {
   if (flag2.value === id) {
      flag2.value = 0
      lists2.value = []
      return
   }
   flag2.value = id
   flag3.value = false
   proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/good_type?lang=en&product_id=' + id + '&offset=0limit=8').then(val => {
    lists.value = val.data.msg
    for (var k in val.data.msg) {
      lists.value.push(val.data.msg[k])
    }
    lists2.value = []
    lists.value.forEach((val, i) => {
      if (i >= 4) {
         return true
      }
      lists2.value.push(val)
    })
    console.log(lists2.value)
   })
}
function data () {
   proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/good_like?lang=en&page=' + page.value + '').then(val => {
   if (val.data.row.length === 0) {
      return true
   }
   arrLike.value = val.data.row
   if (flag.value) {
      arrList.value.push(arrLike.value[0])
      flag.value = false
   }
   if (arrList.value.length > 1) {
      arrList.value.splice(1, 1)
      console.log(arrList.value)
   }
})
}

function subtract () {
   page.value--
   if (page.value <= 0) {
      page.value = 0
      return
   }
   data()
}
function add () {
   page.value++
   if (page.value >= 13) {
      page.value = 13
      return
   }
   data()
}

</script>
<style scoped src="@/assets/css/know-about.css">
body {
   text-align: left
}
</style>
